<template>
    
     <el-main v-loading="loading">
        
     
     <template>
      <span>商品类型</span>
      <el-select v-model="value"  placeholder="请选择" clearable @change="findSecond()">
        <el-option
          v-for="item in secondType"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
        
      </el-select>
    </template>
      
      
      <el-table
      ref="multipleTable"
      :data="information.data"
      
      prop="status"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <div v-if="props.row.photos" style="margin-left:46px;">
            <el-image v-for="(photo,index) in props.row.photos.split(',')" :key="index"
              style="width: 138px; height: 138px;margin-left: 2px;margin-right: 2px;"
              :src="photo" 
              :preview-src-list="props.row.photos.split(',')">
            </el-image>
          </div>
        </template>
      </el-table-column>
      
      <el-table-column
        prop="title"
        label="商品信息"
        align="center"
        width="180">
        
      </el-table-column>
      <el-table-column
        prop="introduce"
        label="商品信息"
        align="center"
        width="180">
        
      </el-table-column>
      <el-table-column
          prop="user.username"
          label="卖家"
          align="center"
          width="100">
          
      </el-table-column>
      
      <el-table-column
        prop="price"
        sortable
        width="100px"
        align="center"
        label="商品价格">
      </el-table-column>
      <el-table-column
        prop="store"
        sortable
        width="100px"
        align="center"
        label="出售数量">
      </el-table-column>
      <el-table-column
        prop="phone"
        sortable
         align="center"
         width="120px"
        label="联系方式">
      </el-table-column>
      
      
      <el-table-column
        prop="status"
         align="center"
         width="120px"
        label="商品状态">
        <template slot-scope="scope">
          <el-tag type="green" v-if="scope.row.status==0" >待审核</el-tag>
          <el-tag type="danger" v-if="scope.row.status==2" >已下架</el-tag>
          <el-tag type="success" v-if="scope.row.status==1" >已上架</el-tag>
          <el-tag type="green" v-if="scope.row.status==3" >审核不通过</el-tag>
        </template>
      </el-table-column>
       <el-table-column
     
      label="操作"
      width="200">
     
        
        
      

      <template slot-scope="scope">
        <el-button type="text" size="small"  @click="changeStatus(scope.row,1)" v-if="scope.row.status==0">审核通过</el-button>
        <el-button type="text" size="small"  @click="changeStatus(scope.row,3)" v-if="scope.row.status==0">审核不通过</el-button>
        <el-button type="text" size="small"  @click="changeStatus(scope.row,2)" v-if="scope.row.status==1">下架</el-button>
        <el-button type="text" size="small"  @click="changeStatus(scope.row,1)" v-if="scope.row.status==2">上架</el-button>
      </template>
    </el-table-column>

      
    </el-table>
<!-- 查看详情 -->
<el-dialog
    title="订单详情"
    :visible.sync="dialogVisible"
    align="center"
    width="50%"
  >
     
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    
  </el-dialog>
    <!-- 分页组件，页数小于等于1时不显示 -->
      <el-col>
        <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :page-sizes="[5, 10, 15, 20, 25]"
          :page-size="information.size"
          :total="information.total"
          :hide-on-single-page="hidePagination"
          layout="prev, pager, next, sizes, total">
        </el-pagination>
      </el-col>
     </el-main>
</template>
<script>

    export default {
      data(){
        return {
          information:[],
          idePagination:true,
          currentOrder:{},
          hidePagination:false,
          tableData:[],
          multipleSelection:[],
          secondType:[],
          value:'',
          findUtil:{
            size: 5,
            page: 1,
            kind: 1, //1为查所有 2为根据商品类型查询
            id:'',
            message:''
          }
        }
        
      },
      computed:{
        
      },
      methods: {
        handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleCurrentChange:function(page){
          this.findUtil.page=page
          this.pageMessageChange()
          
       } ,
       handleSizeChange:function(size){
          this.findUtil.size=size
          this.pageMessageChange()
         
      },
      //对商品的操作
      //状态改变信息
      changeStatus:function(val,status){
          this.$axios.get("http://localhost:8080/second/setGoodStatus/"+val.id+"/"+status).then(res=>{
          
          if(res.data.status= "SUCCESS"){
            this.$message.success("修改成功")
            val.status=status
          }else{
            this.$message.success("修改失败")
          }
        })
      }
      ,
      pageMessageChange(){
        this.$axios.post("http://localhost:8080/second/findSecond/",this.findUtil).then(res => {
          if(res.data.status == "SUCCESS"){
            this.information = res.data.data
            console.log(res.data.data);
            
          }else{
            this.$message.error("没有查到该数据")
            this.information = []
          }
        })
      },
      // 获取选择之后的商品
      findSecond:function(){
      
        this.findUtil.page=1
        this.findUtil.size=5
        if(this.value==''|this.value==null){
          this.findUtil.kind=1
        }else{
          this.findUtil.kind=2
          this.findUtil.id = this.value
        }
        
        this.pageMessageChange()
      },
      /* 默认页 */
      initPage:function(){
        this.findUtil.page=1
        this.findUtil.size=5
        this.findUtil.kind=1
        this.pageMessageChange()
      }
      
      },
      mounted() {
        
        //获取信息
       this.pageMessageChange()
      
        //查找商品类别
       this.$axios.get("http://localhost:8080/second/findKind/" ).then(res => {
          if(res.data.status= "SUCCESS"){
            this.secondType=res.data.data
            console.log(res.data.data);
          }else{
           this.$message.error("类别查找失败")
          }
        })
      }
    }
</script>

<style scoped>

</style>
